<template>
  <div class="container">
    <div class="c-button">
      <el-button @click.native="show" class="button">打卡设置</el-button>
      <el-input
        :style="{width: '200px',marginLeft: '10px'}"
        @keyup.enter.native="handleSearch"
        placeholder="请输入内容"
        suffix-icon="el-icon-zoom-in"
        v-model="searchValue"
      ></el-input>

      <el-select v-model="selectedOnline" placeholder="请选择">
        <el-option @click.native="handleOn" :label="on" :value="on"></el-option>
        <el-option @click.native="handleOff" :label="off" :value="off"></el-option>
      </el-select>
    </div>
    <div class="c-form">
      <el-table
        :data="listData"
        style="width: 100%"
        :header-cell-style="{color: 'white', backgroundColor: '#267fc2', textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
      >
        <el-table-column prop="department_name" label="单位" width="220"></el-table-column>
        <el-table-column prop="name" label="当前值班人员" width="220"></el-table-column>
        <el-table-column prop="phone_munber" label="当前值班人员电话" width="220"></el-table-column>
        <el-table-column prop="times" label="24小时内离线次数" width="220"></el-table-column>
        <el-table-column prop="time" label="最近打卡时间" width="220"></el-table-column>
        <el-table-column prop="status" width="220" label="状态">
          <template slot-scope="scope">
            <el-button
              :class="[scope.row.status==0?'off': '']"
              type="primary"
              :loading="true"
            >{{scope.row.status==0?'离线':'在线'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="c-page">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="page.total"
        ></el-pagination>
      </div>
    </div>

    <transition name="fade">
      <div v-if="isShow" class="card-setting">
        <el-card class="box-card" :body-style="{padding: '20px 30px'}">
          <div slot="header" class="clearfix">
            <span>打卡设置</span>
          </div>
          <div class="select">
            <div class="start">
              值班开始时间：
              <el-time-select
                v-model="startTime"
                :picker-options="{start: '08:30',step: '00:05',end: '22:30'}"
                placeholder="选择时间"
              ></el-time-select>
            </div>
            <div class="end">
              值班结束时间：
              <el-time-select
                v-model="endTime"
                :picker-options="{start: '08:30',step: '00:05',end: '22:30'}"
                placeholder="选择时间"
              ></el-time-select>
            </div>
          </div>
          <div class="sign-jg">
            <el-radio v-model="radio" label="0">间隔打卡</el-radio>
            <div class="dec">
              每隔
              <el-input class="time" size="mini" v-model="minute"></el-input>分钟，打一次卡
            </div>
          </div>
          <div class="sign-ds">
            <el-radio v-model="radio" label="1">定时打卡</el-radio>
            <div class="dec">
              共打卡
              <el-input class="time" size="mini" v-model="times"></el-input>次
            </div>
          </div>

          <div class="select-time">
            <div class="grasp" v-for="item of selectedTime" :key="item.id">
              <el-time-select
                v-model="item.value"
                :style="{width: '150px'}"
                :picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
                placeholder="选择时间"
              ></el-time-select>
            </div>
          </div>

          <div class="operation">
            <el-button @click.native="handleSure" size="small">确定</el-button>
            <el-button @click.native="show" size="small">取消</el-button>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active{
  
}
.container {
  position: relative;
  height: 100%;
}
.c-button {
  position: absolute;
  top: 50px;
  left: 150px;
}
.button {
  background-color: #267fc2;
  color: white;
}
.c-form {
  position: absolute;
  top: 120px;
  left: 150px;
}
.c-page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.status {
  margin-left: 25px;
  width: 86px;
  height: 24px;
  background: rgba(35, 131, 240, 1);
  border-radius: 10px;
  color: white;
}
// 卡片
.card-setting {
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix {
  text-align: center;
  background-color: #267fc2;
  padding: 0;
  color: white;
  font-size: 24px;
  padding: 20px 0;
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.start {
  margin-bottom: 20px;
  margin-top: 25px;
}
.sign-jg {
  margin-bottom: 10px;
}
.time {
  width: 70px;
}
.dec {
  margin-top: 15px;
  margin-left: 20px;
}
.select-time {
  width: 400px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}
.operation {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.operation .el-button {
  background-color: #267fc2;
  color: white;
}
.grasp {
  margin-right: 25px;
  margin-bottom: 20px;
}
.off {
  background-color: #909399 !important;
}
</style>

<script>
import RemoteData from "./mixins/RemoteData";

export default {
  mixins: [
    RemoteData({
      listData: "Admin/getAllCheck"
    })
  ],
  data() {
    return {
      on: "在线",
      off: "不在线",
      isShow: false,
      radio: "",
      input: 0,
      minute: "",
      times: "",
      searchValue: "",
      selectedOnline: "",
      startTime: "",
      endTime: "",
      selectedTime: []
    };
  },
  watch: {
    times(val) {
      const arr = new Array(Number(val));
      for (let i = 0; i < arr.length; i++) {
        arr[i] = {
          value: ""
        };
      }
      this.selectedTime = arr;
    }
  },
  computed:{
    selectedArr(){
      const endArr = []
      this.selectedTime.forEach((item,index)=>{
        endArr[index] = item.value
      })
      return endArr
    }
  },
  methods: {
    show() {
      this.isShow = !this.isShow;
    },
    handleSearch() {
      this.$http
        .get("Admin/searchUnit", {
          params: {
            department_name: this.searchValue
          }
        })
        .then(res => {
          console.log(res.data.data);
          let searchData = res.data.data;
          this.updateData(searchData);
        });
    },
    handleCurrentChange(val) {
      this.$http
        .get("http://duty.myxy99.cn/api/Admin/getAllCheck?page=" + val)
        .then(res => {
          let pageData = res.data.data;
          this.updateData(pageData);
        });
    },
    handleSure() {
      const obj = {
        begin_time: this.startTime,
        end_time: this.endTime,
        status: this.radio
      };
      if (this.radio == "0") {
        obj["count"] = this.minute;
      } else {
        obj["count_array"] = this.endArr; 
      }
      this.$http.post("Admin/setCheck", obj).then(res => {
        this.$message({
          message: "成功",
          type: "success"
        });
        this.show();
        console.log(res);
      });
    },
    handleOn() {
      this.initWebSocket("在线");
    },
    handleOff() {
      this.initWebSocket("不在线");
    }
  }
};
</script>